<template>
  <header class="header" :class="{ 'header-scrolled': isScrolled }">
    <div class="layout-container flex-between h-16">
      <div class="flex items-center gap-2">
        <NuxtLink to="/" class="logo flex items-center gap-2">
          <n-icon size="24" class="text-primary">
            <BookOutline />
          </n-icon>
          <h1 class="text-xl font-bold text-text-primary">
            博客 <span class="text-primary">简历</span>
          </h1>
        </NuxtLink>
      </div>

      <nav class="hidden md:flex items-center gap-6">
        <NuxtLink
          v-for="(item, index) in navItems"
          :key="index"
          :to="item.path"
          class="nav-link text-text-secondary hover:text-primary transition-colors py-2 text-14px"
          active-class="text-primary"
        >
          {{ item.name }}
        </NuxtLink>
      </nav>

      <div class="flex items-center gap-2">
        <ThemeSwitcher />

        <n-button
          quaternary
          circle
          class="md:hidden menu-button"
          @click="isMobileMenuOpen = true"
        >
          <n-icon size="18">
            <MenuOutline />
          </n-icon>
        </n-button>
      </div>
    </div>
    <MobileMenu v-model:isOpen="isMobileMenuOpen" />
  </header>
</template>

<script setup lang="ts">
import { BookOutline, MenuOutline } from "@vicons/ionicons5";
import MobileMenu from "~/components/MobileMenu.vue";

const isMobileMenuOpen = ref(false);
const isScrolled = ref(false);

// 监听滚动事件
onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});

// 滚动处理函数
function handleScroll() {
  isScrolled.value = window.scrollY > 20;
}

const navItems = [
  { name: "首页", path: "/" },
  { name: "简历", path: "/resume" },
  { name: "博客", path: "/blog" },
  { name: "作品集", path: "/portfolio" },
  { name: "关于", path: "/about" },
];
</script>

<style scoped lang="scss">
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.75rem 0;
  transition: all 0.3s ease;

  /* 浅色主题专用样式 */
  background-color: var(--bg-primary);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 暗色主题覆盖 */
:global(.dark-theme) .header {
  background-color: var(--bg-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 暗色主题滚动覆盖 */
:global(.dark-theme) .header-scrolled {
  background-color: rgba(var(--bg-primary-rgb), 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Logo样式增强 */
.logo {
  font-size: 1.25rem;
  line-height: 1.2;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: translateY(-1px);
}

.logo .n-icon {
  filter: drop-shadow(0 2px 4px rgba(var(--primary-color-rgb), 0.2));
}

/* 导航链接样式增强 */
.nav-link {
  position: relative;
  text-decoration: none;
  padding: 6px 0;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

:global(.dark-theme) .nav-link {
  color: var(--text-secondary);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2.5px;
  background-color: var(--primary-color);
  transition: width 0.3s ease, opacity 0.3s ease;
  opacity: 0.7;
  border-radius: 1px;
}

.nav-link:hover {
  color: var(--primary-color);
}

.nav-link:hover::after {
  width: 100%;
  opacity: 1;
}

/* 激活状态样式 */
.nav-link.text-primary {
  font-weight: 600;
  color: var(--primary-color) !important;
}

.nav-link.text-primary::after {
  width: 100%;
  opacity: 1;
  height: 3px;
}

/* 增强 logo 效果 */
.logo {
  font-size: 1.25rem;
  line-height: 1.2;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: translateY(-1px);
}

.logo .n-icon {
  filter: drop-shadow(0 2px 4px rgba(var(--primary-color-rgb), 0.2));
}

.logo h1 {
  letter-spacing: 0.01em;
}

.logo .text-primary {
  font-weight: 700;
}

/* 改进在暗模式下的菜单按钮可见性 */
:deep(.menu-button .n-icon) {
  color: var(--text-primary);
}

/* 确保不出现FOUC (Flash of Unstyled Content) */
:deep(h1),
:deep(.nav-link),
:deep(.logo) {
  font-size: inherit;
  transition: color 0.3s ease;
}

:deep(.theme-switcher) {
  color: var(--text-primary) !important;
}

/* 主题切换按钮效果优化 */
:deep(.theme-switcher) {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

:deep(.theme-switcher:hover) {
  transform: rotate(15deg);
  opacity: 0.9;
}
</style>
